import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TextInput, View, Image, AsyncStorage,Keyboard } from 'react-native';
import { Button, List, InputItem, Toast } from "antd-mobile-rn";
import logo from '../assets/images/logo.png';
import fly from '../api/net';
import config from '../api/api';
import JPushModule from 'jpush-react-native';
import QS from 'qs';
import UserUtils from "../data/user";
import { Actions } from 'react-native-router-flux';

export default class Login extends Component {

    state = {
        phoneInputType: "phone-pad",
        disabled: true,
        validate_disabled: true,
        phone: "",
        validate: "",
        countDown: 90,
        validate_text: "获取验证码",
        registrationId: ""
    }

    componentDidMount() {
        // JPushModule.notifyJSDidLoad((resultCode) => {
        //     if (resultCode === 0) { }
        // });
        JPushModule.getRegistrationID(registrationId => {
            this.state.registrationId = registrationId;
        })
    }

    constructor(props) {
        super(props)
    }
    checkForm() {
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/


        if (!reg.test(this.state.phone)) {

            this.setState({
                disabled: true,
                validate_disabled: true
            })
            return false
        }
        if (this.state.countDown == 90) {
            this.setState({
                validate_disabled: false
            })
        }


        if (this.state.validate == "") {
            this.setState({
                disabled: true
            })
            return false
        }
        this.setState({
            disabled: false
        })
        console.log(this.state.disabled)
        return true

    }

    onGetValidate() {
        Toast.loading("正在获取", 0);
        fly.get(config.GET_CODE, { num: this.state.phone }).then(res => {
            Toast.hide();
            Toast.info(res.msg, 1);
            console.log(res);
            if (res.code == 200) {
                let timer = setInterval(() => {
                    this.state.countDown--;
                    if (this.state.countDown > 0) {
                        let text = `${this.state.countDown}S后重新获取`;
                        this.setState({
                            validate_disabled: true,
                            validate_text: text,
                        })
                    } else {
                        clearInterval(timer);
                        this.state.countDown = 90;
                        this.setState({
                            validate_disabled: false,
                            validate_text: "获取验证码",
                        })
                    }
                }, 1000)
            }

        }).catch(error => {
            Toast.hide();
            Toast.fail("网络错误");
            console.log(error);
        })

        // fly.post(config.GET_CODE,{code})

    }
    login() {
        Toast.loading("正在登录", 0);
        Keyboard.dismiss();
        fly.post(config.LOGIN, QS.stringify({ uid:this.state.phone, code: this.state.validate, registerid: this.state.registrationId })).then(res => {
            Toast.hide();
            if (res.code == 200) {
                let data =  res.data;
                data.uid = this.state.phone;
                UserUtils.saveUserInfo(data);
                Toast.success("登录成功");
                Actions.replace("home");
            } else {
                Toast.fail(res.msg);
            }
        }).catch(error => {
            Toast.hide();
            Toast.fail("网络错误");
            console.log(error);

        })
    }

    render() {
        const phoneType = this.state.phoneInputType;
        let disabled = this.state.disabled;
        let validate_disabled = this.state.validate_disabled;
        let validate_text = this.state.validate_text;
        return (
            <View style={styles.container}>
                <Image style={styles.logo} source={logo}></Image>
                <List style={styles.loginPanel}>
                    <InputItem style={styles.userName} onChange={(text) => {
                        this.state.phone = text.replace(new RegExp(" ", 'g'), "")
                        this.checkForm()
                    }} clear type="phone" placeholder="请输入手机号" />
                    <InputItem style={styles.passWord} clear type="number" onChange={(text) => {
                        this.state.validate = text;
                        this.checkForm();
                    }} placeholder="验证码" extra={
                        <Button style={styles.validateBtn} onPressIn={() => { this.onGetValidate() }} type="primary" disabled={validate_disabled} size="small" style={styles.validateBtn}>{validate_text}</Button>
                    } />
                </List>
                <Button disabled={disabled} onPressIn={() => { this.login() }} style={styles.loginButton} type="primary">立即登录</Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f0f0f0',
    },
    logo: {
        width: 80,
        height: 80,
        marginBottom: 60
    },
    loginPanel: {
        width: "100%",
        marginBottom: 50,
        backgroundColor: "#fff",
    },
    userName: {
        height: 50,
        paddingStart: 10,
        paddingEnd: 10,
        borderBottomColor: "#f0f0f0",
        borderBottomWidth: 1,
    },
    passWord: {
        height: 50,
        paddingStart: 10,
        paddingEnd: 10,
        backgroundColor: "#fff",
        flexDirection: "row",
        alignItems: "center",
    },
    passWordInput: {
        height: 50,
        flex: 1,
    },
    loginButton: {
        width: "90%",
        marginBottom: 40
    },
    validateBtn: {
        height: 32,
        width: 100,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});